<template>
  <div class="grid-board" style="overflow: hidden">
    <a-row type="flex" :style="{ margin: -1 * space + 'px' }">
      <a-col
        v-for="(item, index) of columns"
        v-bind="getColSpan(item)"
        :key="item.key || index"
        :style="{ padding: space + 'px' }"
      >
        <slot v-if="typeof item.slot === 'string' && item.slot" :name="item.slot" :scope="item" />
        <slot v-else :scope="item" />
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { get } from 'lodash-es';

export default {
  name: 'grid-board',
  props: {
    /* columns: [ { colSpan: 8 },... ] */
    columns: { type: Array, default: () => [] },
    gutter: { type: Number, default: 8 },
    colSpan: { type: [Number, Object], default: 8 },
  },
  computed: {
    space() {
      const gutter = this.gutter / 2;
      return Number.isFinite(gutter) ? gutter : 4;
    },
  },
  methods: {
    getColSpan(scope) {
      const colSpan = get(scope, 'colSpan');
      if (typeof colSpan === 'object' && colSpan) {
        return colSpan;
      }
      if (typeof colSpan === 'number') {
        return { span: colSpan };
      }
      return { span: this.colSpan };
    },
  },
};
</script>

<style lang="less"></style>
